<template>
	<view class="content">
		<view class="content-header">
			<view class="app-title ac">
				<view class="fl" @click="back">
					<image class="back" src="/static/img/back.png"></image>
				</view>{{param?'进程看板':'应急处置'}}
			</view>
			<view class="my-work ac" v-if='!param'>
				<!-- 	<view class="fl menu ac">
					<view :class="{on:tab == 0}" @click="setTab(0)"><b>进程看板</b></view>
				</view> -->
				<view class="fl menu ac">
					<view :class="{on:tab == 1}" @click="setTab(1)"><b>维修建议</b></view>
				</view>
				<view class="fl menu ac">
					<view :class="{on:tab == 2}" @click="setTab(2)"><b>故障工单</b></view>
				</view>

				<view class="clearfix"></view>
			</view>
		</view>
		<view style="height:255upx;" v-if='!param'></view>
		<view style="height:132upx;" v-else></view>
		<ProcessBoard v-if='tab==0 || param' :httpParams="propParams"></ProcessBoard>
		<MaintenSuggest v-if='tab==1 && !param' :httpParams="propParams"></MaintenSuggest>
		<FaultOrder v-if='tab==2 && !param' :httpParams="propParams"></FaultOrder>


	</view>
</template>

<script>
	import FaultOrder from '../../../components/emergencyDisposal/faultOrder';
	import MaintenSuggest from '../../../components/emergencyDisposal/maintenSuggest';
	import ProcessBoard from '../../../components/emergencyDisposal/processBoard';
	export default {
		components: {
			FaultOrder,
			MaintenSuggest,
			ProcessBoard,
		},
		data() {
			return {
				tab: 1,
				propParams: {},
				param: ''
			}
		},
		onLoad(options) {
			this.propParams = JSON.parse(options.params);
			this.param = options.param
		},
		created() {
			console.log('this.propParams', this.propParams)
		},
		onBackPress(e) {
			this.back()
		},
		methods: {
			back() {
				if (!this.param) {

					uni.navigateTo({
						url: `/pages/emergency/emergencyInfo/index?faultId=${JSON.stringify(this.propParams)}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/emergency/emergencyInfo/index?param=proces&faultId=${JSON.stringify(this.propParams)}`
					});
				}
			},
			setTab(i) {
				if (this.tab == i) return;
				this.tab = i;
			},
		}
	}
</script>

<style scoped lang="less">
	.content {
		height: 100vh !important;
		padding-bottom: 5px;
	}

	.content-header {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;

		.my-work {
			background: #fff;
			margin-bottom: 16px;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
			// padding-left: 80upx;

			.menu {
				width: 50%;
				color: #3E3A39;
				line-height: 54px;
				// margin-right: 105upx;

				.on {
					width: 60%;
					// color: #307BE0;
					// border-bottom: 2px solid #307BE0;
					color: #5cbda9;
					border-bottom: 2px solid #5cbda9;
					margin: 0 auto;

				}
			}

			view:nth-child(3) {
				margin-right: 0;
			}
		}
	}
</style>